// 评分汇总表
<template>
  <div class="box">
    <!-- 头部筛选 -->
    <div style="margin-top: 30px; font-size: 13px;">
      考评对象:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-select v-model="accessorys" @change="filterTableData">
        <el-option v-for="objects in objectOptions" :key="objects.value" :label="objects.label" :value="objects.value">
        </el-option>
      </el-select>
    </div>
    <div style="margin-left: 350px; margin-top: -40px; font-size: 13px;">
      进展状态:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-select v-model="statet" @change="filterTableData">
        <el-option v-for="status in statusOptions" :key="status.value1" :label="status.label" :value="status.value1">
        </el-option>
      </el-select>
    </div>
    <div style="margin-left: 700px; margin-top: -40px; font-size: 13px;">
      成绩申诉状态:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-select v-model="value2" @change="filterTableData">
        <el-option v-for="item in arrs" :key="item.value2" :label="item.label" :value="item.value2">
        </el-option>
      </el-select>
      <el-button type="primary" plain icon="el-icon-download" size="default" style="margin:0 40px 20px" @click="derive">导出</el-button>
    </div>  
    <!-- 表格部分 -->
    <el-table border :data="tableData" style="margin-top: 20px; width: 96%" :row-class-name="tableRowClassName">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column align="center" prop="accessorys" label="考评对象" width="200"></el-table-column>
      <el-table-column align="center" prop="state_progress" label="进展状态" width="200"></el-table-column>
      <el-table-column align="center" label="成绩申述状态" width="200">
        <template slot-scope="scope">
          {{ scope.row.state_performance }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="score_yearend" label="年终考评分" width="196"></el-table-column>
      <el-table-column align="center" prop="score_collect" label="年终汇总计分" width="200"></el-table-column>
      <el-table-column align="center" prop="ranking" label="排名"></el-table-column>
      <el-table-column align="center" prop="broker" label="审核经办人"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { save, getObj, getSta, getGrade } from "../../../api/zhenfu/huizong";

export default {
  data() {
    return {
      loading: false,
      tableData: [],
      objectOptions: [],
      statusOptions: [],
      arrs: [], // 成绩申诉状态下拉框数据
      accessorys: null,
      statet: null,
      value2: null
    }
  },
  created() {
    this.fetchDropdownData();
    this.filterTableData(); // 初次加载数据
  },
  methods: {
    fetchDropdownData() {
      // 获取下拉框数据
      getObj().then(response => {
        if (response.success) {
          this.objectOptions = JSON.parse(response.message); // 解析下拉框数据
        }
      }).catch(error => console.error(error));

      getSta().then(response => {
        if (response.success) {
          this.statusOptions = JSON.parse(response.message);
        }
      }).catch(error => console.error(error));

      getGrade().then(response => {
        if (response.success) {
          this.arrs = JSON.parse(response.message);
        }
      }).catch(error => console.error(error));
    },
    fetchTableData(params = {}) {
      // 根据参数获取表格数据
      this.loading = true;
      save(params).then(response => {
        if (response.success) {
          this.tableData = JSON.parse(response.message); // 解析表格数据
        } else {
          this.$message.error("数据获取失败");
        }
        this.loading = false;
      }).catch(err => {
        console.log(err);
        this.loading = false;
      });
    },
    filterTableData() {
      // 当下拉框的值变化时过滤表格数据
      const params = {
        accessorys: this.accessorys,
        state_progress: this.statet,
        state_performance: this.value2
      };
      this.fetchTableData(params);
    },
    derive() {
      // 导出功能
    }
  }
}
</script>


<style scoped>
.box{
        margin-left: 30px;
        margin-top: 20px;
    }

</style>